<template>
    <van-nav-bar
        title="我的订单"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onBack"
    />

    <div style="height: 46px;"></div>

    <van-tabs v-model:active="active"  @click-tab="onTab" sticky>
        <van-tab v-for="(item,index) in TabList" :key="index" :title="item.text" :name="item.name">
        </van-tab>
    </van-tabs>

    <div class="list-box">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <div class="list">
                    <!-- 一个item代表一个订单 -->
                    <div class="item" v-for="item in list" :key="item.id">
                        <div class="header">
                            <div class="left">
                                订单号：<span>{{ item.code }}</span>
                            </div>
                            <div class="right">{{ item.status_text }}</div>
                        </div>
                        <div class="content">
                            <van-card
                                v-for="son in item.order_product"
                                :key="son.id"
                                :num="son.nums"
                                :price="son.total"
                                desc="描述信息"
                                :title="son.products.name"
                                :thumb="son.products.thumbs_cdn[0]"
                            >
                                <template #desc>
                                    <span>商品单价：￥{{ son.price }}</span>
                                </template>
                            </van-card>
                        </div>
                        <div class="footer">
                            <div class="date">{{ item.createtime_text }}</div>
                            <div class="btn">
                                <van-button
                                    size="mini"
                                    type="primary"
                                    @click="toInfoPage(item.id)"
                                >
                                    订单详情
                                </van-button>

                                <van-button
                                    v-if="item.status == 0"
                                    size="mini"
                                    type="success"
                                    @click="onPay(item.id)"
                                >
                                    确认支付
                                </van-button>

                                <van-button
                                    v-if="item.status == 3"
                                    size="mini"
                                    type="success"
                                    @click="onRate(item.id)"
                                >
                                    评价
                                </van-button>

                                <van-button
                                    v-if="item.expresscode"
                                    size="mini"
                                    type="warning"
                                    @click="toExpressPage(item.id)"
                                >
                                    物流信息
                                </van-button>
                                
                                <van-button
                                    size="mini"
                                    v-if="item.status == 2"
                                    type="success"
                                    @click="Confirmreceipt(item.id)"
                                >
                                    确认收货
                                </van-button>
                                <van-button
                                    size="mini"
                                    v-if="item.status == 4"
                                    type="success"
                                    @click="toEvaluationPage(item.id)"
                                >
                                    评价详情
                                </van-button>

                                <van-button
                                    size="mini"
                                    v-if="item.status > 0 && item.status != 4"
                                    type="danger"
                                    @click="rejected(item.id)"
                                >
                                    申请退货
                                </van-button>

                                <van-button
                                    size="mini"
                                    v-if="item.status == '-3' && item.depot_status == false"
                                    type="danger"
                                    @click="refundgoods(item.id)"
                                >
                                    待退货
                                </van-button>

                                <van-button
                                    size="mini"
                                    v-if="item.status < 0"
                                    type="danger"
                                    @click="refundinfo(item.id)"
                                >
                                    退货详情
                                </van-button>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>

</template>

<script setup>
import { getCurrentInstance, ref, reactive } from 'vue';

const { proxy } = getCurrentInstance();
const TabList = [
    {
        text: "全部",
        name: "",
    },
    {
        text: "待付款",
        name: "0",
    },
    {
        text: "待发货",
        name: "1",
    },
    {
        text: "待收货",
        name: "2",
    },
    {
        text: "待评价",
        name: "3",
    },
    {
        text: "已完成",
        name: "4",
    },
    {
        text: "售后",
        name: "-1",
    },
];
const active = ref('');
//商品数据
const list = reactive([]);
//刷新状态
const refreshing = ref(false);
//加载结束状态
const finished = ref(false);
//懒加载效果
const loading = ref(false);

const business = reactive(proxy.$cookies.get('business') ?? {});
//显示的页码
const page = ref(1);
//数据的显示10条
const limit = ref(10);
//数据的总数
const listCount = ref(0);

//订单详情
const toInfoPage = (values)=>{
    let data = {
        id:values        
    }
    proxy.$router.push({
        path:'/product/order/detail',
        query:data
    })
}
// 下拉刷新
const onRefresh = () => {
    page.value = 1;
    list.length = 0;
    loading.value = true;
    refreshing.value = true;

    onLoad();
}

// 上拉加载
const onLoad = () => {
    //如果下拉刷新等于是false
    if(!refreshing.value && list.length < listCount.value)
    {
        page.value = page.value + 1;
    }

    //如果下拉刷新是等于true
    if(refreshing.value)
    {
        setTimeout(() => {
            refreshing.value = false;
        },1500);
    }

    setTimeout(getOrderData,1500);
}

// 获取数据方法
const getOrderData = async () => {
    let data = {
        busid:business.id,
        page:page.value,
        limit:limit.value,
        status:active.value
    }

    let result = await proxy.$Api.orderIndex(data);

    if(result && result.code === 0)
    {
        finished.value = true;
        return;
    }

    finished.value = false;
    loading.value = false;

    listCount.value = result.data.count;
    list.push(...result.data.list);

    if(list.length === listCount.value)
    {
        finished.value = true;
        loading.value = false;
        return;
    }
}

// 切换tab
const onTab = (name) => {
    // 调用下拉刷新
    onRefresh();
}
//支付
const onPay = (orderid) => {
    proxy.$showConfirmDialog({
        title:'支付订单',
        message:'确定支付该订单'
    }).then(async ()=>{
        let data = {
            orderid,
            busid:business.id
        }

        let result = await proxy.$Api.orderPay(data);

        if(result && result.code === 1)
        {
            proxy.$showNotify({
                type:'success',
                message:result.msg,
                duration:2000,
                onClose:() => {
                    onRefresh();
                }
            });

            return;
        }else{
            proxy.$showNotify({
                type:'warning',
                message:result.msg,
                duration:2000
            });

            return;
        }
    }).catch((err)=>{
        proxy.$showNotify({
            message:'取消支付'
        })
    })
}

const onBack = () => {
    proxy.$router.back();
}

</script>

<style>
/* .list-box{
    background: #ccc;
} */

.list-box .header {
    display: flex;
    justify-content: space-between;
    /* padding: 0 10px; */
}

.list .item .left span {
    font-size: 14px;
    font-weight: bold;
}

.item {
    padding: 5px 5px 3px;
    background: #fff;
    margin-bottom: 5px;
}

.item .header .left {
    font-size: 13px;
}

.item .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.item .footer .date {
    font-weight: bold;
}
</style>